<template>
    <el-scrollbar>
        <el-table :data="householdList">
            <el-table-column type="selection" width="45" />
            <el-table-column prop="householdId" label="编号" />
            <el-table-column prop="householdName" label="姓名" />
            <el-table-column prop="gender" label="性别" width="60">
                <template #default="scope">
                    <span>{{ scope.row.gender==1?'男':'女' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="householdAddr" label="地址" min-width="150" />
            <el-table-column prop="phone" label="电话" />
            <el-table-column prop="idNum" label="身份证号" width="180" />
            <el-table-column label="操作" min-width="160">
                <template #default>
                    <el-button type="primary" size="small">
                        详情
                    </el-button>
                    <el-button type="success" size="small">
                        修改
                    </el-button>
                    <el-button type="danger" size="small">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination style="margin-top: 20px;" layout="prev, pager, next" :page-count="pageCount" v-model:current-page="pageNum"/>
    </el-scrollbar>
</template>

<script setup lang="ts">
import { inject, watch, onMounted, ref } from 'vue'
import { useAdminStore } from '../store/admin'
import { adminModels } from '../models/AdminModels'

const store01 = useAdminStore()
const setCurPath = inject('setCurPath')
setCurPath('/main/xtdlb')

const householdList = ref([])
const pageCount = ref(0)
const pageNum = ref(1)
const loadData = async (pno)=>{
    let body = await adminModels.adminHouseholdList(pno)
    householdList.value = body.data
    pageCount.value = body.pageCount
    pageNum.value = body.pageNum
}
watch(pageNum, ()=>{
    loadData(pageNum.value)
})
onMounted(() => {
    loadData(1)
})
</script>

<style scoped>
.el-button+.el-button {
    margin-left: 6px;
}
</style>